<template>
    <div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot/>
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5"/>
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12"/>
            <van-goods-action-button type="warning" text="加入购物车"/>
            <van-goods-action-button type="danger" text="立即购买"/>
        </van-goods-action>
    </div>
</template>

<script>
import {Swipe, SwipeItem, Button, Stepper, Cell} from "vant";
import {getGoodsDetailById} from "@/api/goods.js";
import {addCart} from "@/api/cart.js";

export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Button.name]: Button,
        [Stepper.name]: Stepper,
        [Cell.name]: Cell,
    },
    data() {
        return {
            goodsDetail: {}, // 获取到的商品信息
            count: 1, // 购买的商品数量，默认是1
            ballFlag: false, // 控制小球的显示和隐藏
            showSku: false
        };
    },
    props: ["id"], //商品编号
    created() {
        this.getGoodsDetail();
    },
    methods: {
        async getGoodsDetail() {
            try {
                let result = await getGoodsDetailById({id: this.id});
                if (result.code == 1) {
                    this.goodsDetail = result.data;
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
                this.$router.go(-1);
            }
        }, //===================================================

        async onClickAddShopcart() {
            let params = {
                goods_id: this.goodsDetail.id,
                price: this.goodsDetail.price,
                count: this.count,
            };

            try {
                let result = await addCart(params);
                if (result.code == 1) {
                    this.$toast(result.msg);
                    this.$router.back()
                } else if (result.code == 2) {
                    this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
            }
        }, //=============================================
    },
};
</script>

<style lang="less" scoped>
.goods-info {
    padding: 10px;

    .red {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    .num-buy {
        display: flex;
        flex-direction: row;
        margin: 10px 0px;
        justify-content: space-between;
    }

    .good-desc {
        padding: 5px;
    }
}
</style>
